<template>
  <div>
    <h1>{{name}}</h1>
    <h1>{{name2}}</h1>
    <h1>{{ScoolName}}</h1>
  <Student-n :getStudentName="getStudentName"/>
  <hr>
  <!-- school触发事件就会调用这个函数 -->
  <!-- 绑定自定义事件接收子类的数据 -->
  <school-n @jlkj="getSchoolName"/>
  <!-- ref更加灵活 -->
  <!-- <school-n ref="School"/> -->
  </div>
</template>

<script>
import SchoolN from './components/School.vue'
import StudentN from './components/Student'
export default {
  name:'App',
  components:{StudentN,SchoolN},
  data() {
    return {
      name:'欢迎来到vue',
      name2:'',
      ScoolName:''
    }
  },
  methods:{
    getStudentName(n){
     this.name2 = n
    },
    //接收多个参数
    getSchoolName(n,...paramet){
      console.log(n);
      this.ScoolName = n
    }
  },
  //如果只接收一次就写成once
  mounted(){
    // this.$refs.School.$on('jlkj',this.getSchoolName)
    // this.$refs.School.$once('jlkj',this.getSchoolName)//一次性
  }
}
</script>

<style lang="less">
.test{
  color: red;
}
  
</style>
